<template>
  <div id="app">
    <h1>Vue 示例集合</h1>
    
    <div class="event-communication-container">
      <h2>事件通信示例</h2>
      <ParentComponent />
    </div>

    <div class="slots-demo-container">
      <h2>插槽使用示例</h2>
      <SlotDemo />
    </div>

    <div class="advanced-communication-container">
      <h2>高级组件通信</h2>
      
      <div class="communication-methods">
        <div class="method-section">
          <h3>Provide/Inject</h3>
          <ProvideInjectDemo />
        </div>

        <div class="method-section">
          <h3>EventBus（不推荐）</h3>
          <EventBusDemo />
        </div>

        <div class="method-section">
          <h3>Pinia 状态管理</h3>
          <PiniaDemo />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ParentComponent from './components/event-communication/ParentComponent.vue'
import SlotDemo from './components/slots/SlotDemo.vue'
import ProvideInjectDemo from './components/component-communication/ProvideInjectDemo.vue'
import EventBusDemo from './components/component-communication/EventBusDemo.vue'
import PiniaDemo from './components/component-communication/PiniaDemo.vue'
</script>

<style>
#app {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.event-communication-container, 
.slots-demo-container,
.advanced-communication-container {
  background-color: #f0f0f0;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.communication-methods {
  display: flex;
  justify-content: space-between;
}

.method-section {
  flex: 1;
  margin: 0 10px;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 15px;
}

h1, h2, h3 {
  color: #333;
  margin-bottom: 20px;
}
</style>